---
name: Tree 树形控件
menu: Components
route: /components/tree
order: 80
---

import { Playground,Props } from 'docz';
import { Icon } from 'antd'
import Tree from './';
import './style/index.less'
import treeData from './_mock/treeData'
import renderTreeData from './_mock/renderTreeData'

# Tree 树形控件

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。


## 引入

```
import { Tree } from 'antd-virtualized';
const TreeSearch = Tree.Search
```

## 代码演示

### 基本使用
<Playground style={{backgroundColor:'#dafafa'}}>
<Tree
  placeholder="支持大数据的Tree"
  treeData={treeData}
  defaultExpandAll
/>
</Playground>

### 可搜索

<Playground>
<Tree.Search
  placeholder="支持大数据的Tree"
  treeData={treeData}
  selectable
/>
</Playground>

### 节点 Render 函数

<Playground>
<Tree
  placeholder="支持大数据的Tree"
  treeData={renderTreeData}
  selectable
  keyField="key"
  render={(tn)=>{
    if(tn.icon){
      return (<React.Fragment><Icon type={tn.icon}/> {tn.title}</React.Fragment>)
    }
    return (<span>no icon->{tn.title}</span>)
  }}
/>
</Playground>

> 可以传入 render 参数针对所有节点设置 render 函数
>
> 也可在 data 中设置针对单个节点的 render 函数

### 自定义无数据时的显示样式

<Playground>
<Tree.Search
  placeholder="支持大数据的Tree"
  treeData={treeData}
  selectable
  notFoundContent="无数据"
/>
</Playground>


## API

<Props of={Tree} isToggle title="⚛️ Tree props"/>

<Props of={Tree.Search} isToggle title="⚛️ TreeSearch props"/>